<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>yxy前台-首页</title>
		<script src="../js/vue.js"></script>
		<script src="../js/element.js"></script>
		<script src="../js/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/element.css" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../fonts/iconfont/iconfont.css" />
	</head>
	<body>
		<div id="app">
			<!-- 头部 -->
			<div class='head'>
				<!-- logo图片 -->
				<div class="head-logo"></div>
				<!-- 头部标题 -->
				<div class="head-title">音小悦</div>
				<!-- 头部菜单 -->
				<div class="head-nav">
					<ul>
						<li v-for="menu in menus"><a :class="menu.className"
								@click="getMenuUrl(menu.className, menu.id,menu.url)">{{menu.name}}</a></li>
					</ul>
				</div>
				<!-- HOT 标签 -->
				<div class="head-hot">
					HOT
				</div>
				<!-- 头部搜索框 -->
				<div class="head-select">
					<input @keyup.enter="getOneSong" type="text" name="key" v-model="key">
				</div>
				<div class="header-login">
					<div class="head-text" v-if="userInfo==null||userInfo==''" @click="phoneLogin">
						登录
					</div>
					<!-- 头部用户头像 -->
					<div class="head-img" v-else>
						<span @click="toUser"><el-avatar size="large" fit="" :src="userInfo.img">
							</el-avatar></span>
						<span @click="exit" class="downward"><i class="iconfont icon-tuichu1"></i></span>
					</div>
				</div>
			</div>
			<!-- 发现音乐子菜单及分割线 -->
			<div class="hr-childrenMenu1 hr" v-if="menuId == 1">
				<ul>
					<!-- @click="getMenuUrl(childrenMenu.id,childrenMenu.url)" -->
					<li v-for="childrenMenu in childrenMenus"><a :class="childrenMenu.className"
							@click="getChildrenMenuUrl(childrenMenu.className,childrenMenu.id,childrenMenu.url)">{{childrenMenu.name}}</a>
					</li>
				</ul>
			</div>
			<div class="hr-childrenMenu2 hr active2" v-else></div>
			<div class="main">
				<iframe id="indexIframe" frameborder="0" scrolling="no" :src="menuUrl">
				</iframe>
			</div>

			<!-- 回到顶部 -->
			<div class="backTop" @click="backTop">
				<i class="iconfont icon-xiangshang"></i>
			</div>

			<div class="beian">
				<a href="https://beian.miit.gov.cn/" target="_blank">豫ICP备2023009998号-1</a>
			</div>
			<!-- 底部播放器 固定定位 fixed -->
			<div class="foot" @mousemove="mouseOnFoot" @mouseleave="mouseLeaveFoot">
				<!-- 底部播放器 锁定/非锁定状态 -->
				<div class="footIcon" @click="isLock()">
					<!-- 默认是解锁状态 -->
					<i id="lock" class="iconfont icon-jiesuo"></i>
				</div>

				<!-- audio：正在播放的音乐  -->
				<!-- preload 属性规定是否在页面加载后载入音频 -->
				<!-- controls: 显示控件，不写就不显示 -->
				<audio id="song" src="" preload @timeupdate="songTime">
				</audio>

				<!-- 音乐播放器 -->
				<div class="player">
					<!-- 歌曲基本信息： 歌曲图片、歌曲名字、歌手、我喜欢、歌曲评论 -->
					<div class="player-songInfo">
						<span class="song-img">
							<img src="http://p1.music.126.net/zgDvTPDSYKjQUjkV8sQUOA==/109951164605092552.jpg?param=130y130"
								width="30px"></img>
							<!-- 半透明遮罩 -->
							<div class="mask"><i class="iconfont icon-xiangshangzhanhang" style="color: #fff;"
									@click="openImmerse"></i></div>
						</span>
						&nbsp;
						<span class="song-name">
							<span @click="toSong(song.songId)">{{song.songName}}</span> -
							<span @click="toSinger(singer.singerId)"
								v-for="singer in song.singer">{{singer.singerName}}</span>&nbsp;&nbsp;
						</span>
						<!-- 喜欢 空心爱心 -->
						&nbsp;
						<span>
							<i v-if="song.isLove===0" class="iconfont icon-aixin"
								@click="changeLove(1, song.songId)"></i>
							<i v-else class="iconfont icon-aixin_shixin" style="color: #FC6C62;"
								@click="changeLove(0, song.songId)"></i>&nbsp;
						</span>
						<!-- 下载 -->
						&nbsp;<i id="songLoad" @click="songLoad(song.songUrl, song.songName)" class="iconfont icon-xiazai"></i>
						<!-- 评论 -->
						&nbsp;<i @click="toSong(song.songId)" id="comment" class="iconfont icon-pinglun"></i>
					</div>

					<!-- 播放器控件 上一首 播放 下一首 -->
					<div class="player-control">
						<!-- 循环模式 -->
						<i id="round" class="iconfont icon-liebiaoxunhuan" @click="roundButton"></i> &nbsp;
						<!-- 上一首 -->
						<i id="pre" class="iconfont icon-shangyishou" @click="preButton"></i> &nbsp;
						<!-- 播放 / 暂停 -->
						<i id="play" class="iconfont icon-bofang" @click="playButton"></i> &nbsp;
						<!-- 下一首 -->
						<i id="next" class="iconfont icon-xiayishou" @click="nextButton"></i> &nbsp;
						<!-- 音量 -->
						<i id="volume" class="iconfont icon-24gf-volumeMiddle" @click="volumeButton"></i>
						<!-- 歌曲时间进度条 -->
						<div class="play-timeSlider">
							<el-slider v-model="songCurrentTime" :max="duration" @change="songTimeChang"
								:show-tooltip="false"></el-slider>
						</div>
						<!-- 歌曲音量 -->
						<div class="play-volumeSlider">
							<el-slider vertical height="60px" v-model="volume" :max="volumeMax"
								@change="songVolumeChang"></el-slider>
						</div>
					</div>

					<!-- 歌词当前播放时间/歌曲总时间 歌词 播放列表 -->
					<div class="player-other">
						<!-- 进度条当前时间 -->
						<span class="current-time">00:00</span> &nbsp;/&nbsp;
						<!-- 进度条总时长 -->
						<!-- <span class="time">00:00</span> &nbsp; -->
						<span class="time">00:00</span> &nbsp;
						<!-- 歌词 -->
						<span>词</span> &nbsp;
						<!-- 播放列表 -->
						<i id="playList" class="iconfont icon-gedan" @click="openPlayList"></i>{{songList.length}}
					</div>
				</div>
			</div>

			<!-- 播放列表(外边的列表) -->
			<el-drawer title="播放队列" :visible.sync="drawerVisible" :direction="direction" size="20%">
				<!-- 播放列表头部部分：列表总歌数、批量操作、批量删除 -->
				<div class="drawer-header">
					<!-- 播放列表总歌数 -->
					<span class="header-songCount">
						{{songList.length}}首歌曲
					</span>
					<span class="header-icon">
						<!-- 批量操作 -->
						<span class="header-batch">
							<i class="iconfont icon-multipleChoiceList"></i>
						</span> &nbsp;&nbsp;&nbsp;
						<!-- 批量删除 -->
						<span class="header-batchDelete">
							<i class="iconfont icon-shanchu"></i>
						</span>
					</span>
				</div>
				<!-- 歌曲列表 -->
				<div class="drawer-mian">
					<ul>
						<li v-for="(song,index) in songList" class='drawer-li'>
							<div class="song">
								<!-- 歌曲信息：歌曲名、歌手 -->
								<span class="songInfo">
									<span class="songName">
										<!-- 对于正在播放的歌曲，歌名为红色 -->
										<span v-if="index == currentIndex" style="color: #FC6C62;">
											{{song.songName}}
										</span>
										<span v-else>
											{{song.songName}}
										</span>
									</span>
									<span class="singerName">
										<span v-if="index == currentIndex" style="color: #FC6C62;">
											<span v-for="singer in song.singer">
												{{singer.singerName}}&nbsp;
											</span>
										</span>
										<span v-else>
											<span v-for="singer in song.singer">
												{{singer.singerName}}&nbsp;
											</span>
										</span>
									</span>
								</span>
								<!-- 图标：播放/暂停、我喜欢、更多操作 -->
								<span class="icon">
									<!-- 播放 -->
									<!-- @click="listPlayButton(index)" -->
									<i v-if="index == currentIndex" class="songListPlay iconfont icon-24gf-pause2"
										@click="isPause()" style="color: #FC6C62;"></i>
									<i v-else class="songListPlay iconfont icon-24gl-play"
										@click="listPlayButton(index)"></i>&nbsp;
									<i v-if="song.isLove===0" class="iconfont icon-aixin"
										@click="changeLove(1, song.songId)"></i>
									<i v-else class="iconfont icon-aixin_shixin" style="color: #FC6C62;"
										@click="changeLove(0, song.songId)"></i>
									&nbsp;
									<i class="iconfont icon-gengduocaozuo"></i>
								</span>
							</div>
						</li>
					</ul>
				</div>
			</el-drawer>

			<!-- 手机号登录 -->
			<el-dialog title="手机号登录" :visible.sync="phoneLoginVisible" width="25%">
				<form class="loginFrom" action="" method="">
					<!-- 账号 -->
					<div class="inputDiv">
						<input type="text" v-model="loginForm.phone" placeholder="请输入手机号" />
						<span><i class="el-icon-user"></i></span>
					</div>
					<!-- 验证码 -->
					<div class="inputDiv">
						<input placeholder="请输入验证码" placeholder-style="color:#fff;" style="width: 180px;" type="text"
							v-model="loginForm.verifyCode" />
						<span><i class="el-icon-mobile-phone"></i></span>
						<span class="verifyCodeButton"
							@click="getLoginVerifyCode">{{timer === 0 ? '获取验证码' : `${timer}秒`}}</span>
					</div>
					<!-- 注册、忘记密码、手机号登录 -->
					<div class="register">
						<span class="phoneSpan" @click="pwdLogin">密码登录</span>
						<span>
							<span class="registerSpan" @click="phoneRegister">注册</span>&nbsp; | &nbsp;<span
								class="forget">忘记密码</span>
						</span>
					</div>
					<!-- 登录按钮 -->
					<div class="form-button" @click="loginByPhone">
						登 录
					</div>
					<!-- 分割线 -->
					<el-divider>&nbsp; <span>第三方登录</span> &nbsp;</el-divider>
					<!-- 第三方登录 -->
					<div class="otherLogin">
						<span><i class="iconfont icon-weixin" @click="wxLogin"></i></span>
						<span><i class="iconfont icon-QQ-circle-fill"></i></span>
						<span><i class="iconfont icon-weibo"></i></span>
					</div>
				</form>
			</el-dialog>

			<!-- 密码登录 -->
			<el-dialog title="密码登录" :visible.sync="pwdLoginVisible" width="25%">
				<form class="loginFrom" action="" method="">
					<!-- 账号 -->
					<div class="inputDiv">
						<input type="text" v-model="loginForm.phone" placeholder="请输入手机号" />
						<span><i class="el-icon-user"></i></span>
					</div>
					<!-- 密码 -->
					<div class="inputDiv">
						<input type="password" v-model="loginForm.password" placeholder="请输入密码" />
						<span><i class="el-icon-lock"></i></span>
					</div>
					<!-- 注册、忘记密码、手机号登录 -->
					<div class="register">
						<span class="phoneSpan" @click="phoneLogin">验证码登录</span>
						<span>
							<span class="registerSpan" @click="phoneRegister">注册</span>&nbsp; | &nbsp;<span
								class="forget">忘记密码</span>
						</span>
					</div>
					<!-- 登录按钮 -->
					<div class="form-button" @click="loginByPwd">
						登 录
					</div>
					<!-- 分割线 -->
					<el-divider>&nbsp; <span>第三方登录</span> &nbsp;</el-divider>
					<!-- 第三方登录 -->
					<div class="otherLogin">
						<span><i class="iconfont icon-weixin" @click="wxLogin"></i></span>
						<span><i class="iconfont icon-QQ-circle-fill"></i></span>
						<span><i class="iconfont icon-weibo"></i></span>
					</div>
				</form>
			</el-dialog>

			<!-- 微信扫码快捷登录 -->
			<el-dialog title="扫码登录" :visible.sync="wxLoginVisible" width="25%">
				<form class="loginFrom" action="" method="">
					<div class="wxCode">
						<iframe :src="wxCodeUrl" sandbox="allow-scripts allow-top-navigation allow-same-origin"
							frameborder="0" scrolling="no" width="300px" height="365px" style="overflow: hidden;">
						</iframe>
					</div>
					<!-- 分割线 -->
					<el-divider>&nbsp; <span>第三方登录</span> &nbsp;</el-divider>
					<!-- 第三方登录 -->
					<div class="otherLogin">
						<span><i class="iconfont icon-weixin" @click="wxLogin"></i></span>
						<span><i class="iconfont icon-QQ-circle-fill"></i></span>
						<span><i class="iconfont icon-weibo"></i></span>
					</div>
				</form>
			</el-dialog>

			<!-- immerse 音乐播放器沉浸模式 -->
			<div class="immerseDiv">
				<div class="immerse">
					<!-- 模糊遮罩 -->
					<div class="immerse-mask">
						<img
							src="http://p1.music.126.net/LMyITvYRS7NsgA9lYUKpqg==/109951164179134667.jpg?param=130y130">
					</div>
					<!-- 头部图标 下拉、全屏 -->
					<div class="immerse-header">
						<!-- 退出沉浸模式 -->
						<div class="outImmerse" @click="outImmerse">
							<i class="iconfont icon-xiangxia"></i>
						</div>
						<!-- 全屏缩放 -->
						<div class="fullView" @click="fullView">
							<i class="iconfont icon-quanping_o"></i>
						</div>
					</div>
					<!-- 主体：歌曲图片、歌曲歌词 -->
					<div class="immerse-main">
						<!-- 左：歌曲图片 -->
						<span class="song-img">
							<img src="http://p1.music.126.net/zgDvTPDSYKjQUjkV8sQUOA==/109951164605092552.jpg?param=130y130"
								width="380px">
						</span>
						<!-- 右：歌名、歌手、专辑、滚动歌词 -->
						<span class="immerse-songInfo">
							<!-- 歌名 -->
							<div class="songName" @click="toSong(song.songId)">{{song.songName}}</div>
							<!-- 歌手 -->
							<div class="singerName" @click="toSinger(singer.singerId)" v-for="singer in song.singer">
								歌手: &nbsp;&nbsp;<a href="#">{{singer.singerName}}</a>
							</div>
							<!-- 专辑 -->
							<div class="albumName" @click="toAlbum(album.albumId)" v-for="album in song.album">
								专辑: &nbsp;&nbsp;<a href="#">{{album.albumName}}</a>
							</div>
							<!-- 滚动歌词 -->
							<div class="song-lyric">
								<div class="lyric" @scroll="lyricScroll">
									<ul class="ullrc"></ul>
								</div>
							</div>
						</span>
					</div>
					<div class="immerse-foot">
						<!-- 音乐播放器 -->
						<div class="player">
							<!-- 进度条 歌曲时间 -->
							<!-- <div class="block">
								    <span class="demonstration">歌曲时间</span>
								    <el-slider v-model="songCurrentTime" :max="duration" @change="songTimeChang"></el-slider>
								</div> -->
							<!-- 歌曲基本信息： 歌曲图片、歌曲名字、歌手、我喜欢、歌曲评论 -->
							<div class="player-songInfo">
								<!-- 喜欢 空心爱心 -->
								<span>
									<i v-if="song.isLove===0" class="iconfont icon-aixin"
										@click="changeLove(1, song.songId)"></i>
									<i v-else class="iconfont icon-aixin_shixin" style="color: #FC6C62;"
										@click="changeLove(0, song.songId)"></i>&nbsp;
								</span>
								<!-- 下载 -->
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i id="songLoad" @click="songLoad(song.songUrl, song.songName)" class="iconfont icon-xiazai"></i>
								<!-- 评论 -->
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i id="comment" class="iconfont icon-pinglun"></i>
							</div>

							<!-- 播放器控件 上一首 播放 下一首 -->
							<div class="player-control">
								<!-- 循环模式 -->
								<i id="round" class="iconfont icon-liebiaoxunhuan" @click="roundButton"></i>
								&nbsp;&nbsp;&nbsp;&nbsp;
								<!-- 上一首 -->
								<i id="pre" class="iconfont icon-shangyishou" @click="preButton"></i>
								&nbsp;&nbsp;&nbsp;&nbsp;
								<!-- 播放 / 暂停 -->
								<i id="play2" class="iconfont icon-bofang" @click="playButton"></i>
								&nbsp;&nbsp;&nbsp;&nbsp;
								<!-- 下一首 -->
								<i id="next" class="iconfont icon-xiayishou" @click="nextButton"></i>
								&nbsp;&nbsp;&nbsp;&nbsp;
								<!-- 音量 -->
								<i id="volume" class="iconfont icon-24gf-volumeMiddle" @click="volumeButton1"></i>
								<!-- 歌曲时间进度条 -->
								<div class="play-timeSlider">
									<el-slider v-model="songCurrentTime" :max="duration" @change="songTimeChang"
										:show-tooltip="false"></el-slider>
								</div>
								<!-- 歌曲音量 -->
								<div class="play-volumeSlider1">
									<el-slider vertical height="60px" v-model="volume" :max="volumeMax"
										@change="songVolumeChang"></el-slider>
								</div>
							</div>

							<!-- 歌词当前播放时间/歌曲总时间 歌词 播放列表 -->
							<div class="player-other">
								<!-- 进度条当前时间 -->
								<span class="current-time">00:00</span> &nbsp;/&nbsp;
								<!-- 进度条总时长 -->
								<!-- <span class="time">00:00</span> &nbsp; -->
								<span class="time">00:00</span> &nbsp;&nbsp;&nbsp;
								<!-- 歌词 -->
								<span>词</span> &nbsp;&nbsp;&nbsp;
								<!-- 播放列表 -->
								<i id="playList" class="iconfont icon-gedan"
									@click="drawerVisible=true"></i>{{songList.length}}
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 手机号注册 -->
			<el-dialog title="手机号注册" :visible.sync="phoneRegisterVisible" width="25%">
				<form class="loginFrom" action="" method="">
					<!-- 账号 -->
					<div class="inputDiv">
						<input type="text" v-model="registerForm.phone" placeholder="请输入手机号" />
						<span><i class="el-icon-user"></i></span>
					</div>
					<!-- 验证码 -->
					<div class="inputDiv">
						<input placeholder="请输入验证码" placeholder-style="color:#fff;" style="width: 180px;" type="text"
							v-model="registerForm.verifyCode" />
						<span><i class="el-icon-mobile-phone"></i></span>
						<span class="verifyCodeButton"
							@click="getRegisterVerifyCode">{{registerTimer === 0 ? '获取验证码' : `${registerTimer}秒`}}</span>
					</div>
					<!-- 注册、忘记密码、手机号登录 -->
					<div class="register">
						<span class="phoneSpan" @click="phoneLogin">验证码登录</span>
						<span>
							<span class="registerSpan">注册</span>&nbsp; | &nbsp;<span class="forget">忘记密码</span>
						</span>
					</div>
					<!-- 登录按钮 -->
					<div class="form-button" @click="registerByPhone">
						注 册
					</div>
					<!-- 分割线 -->
					<el-divider>&nbsp; <span>第三方登录</span> &nbsp;</el-divider>
					<!-- 第三方登录 -->
					<div class="otherLogin">
						<span><i class="iconfont icon-weixin" @click="wxLogin"></i></span>
						<span><i class="iconfont icon-QQ-circle-fill"></i></span>
						<span><i class="iconfont icon-weibo"></i></span>
					</div>
				</form>
			</el-dialog>
		</div>
		</div>
	</body>
	<script src="../js/index.js" type="module"></script>
</html>